import React, {Component} from 'react';
import "./index.less"
import moment from 'moment';
import {Pagination} from "antd";
import {AxioInstance} from "../../api/AxiosHelper";
import {GET_NEWS_LIST} from "../../api/APIURLDefine";
import {inject, observer} from "mobx-react";

interface INewsItem {
    title: string;
    time: string;
    id: string;
}

/*新闻中心页*/
@inject("globalStore")
@observer
class NewsCenter extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            page: 1,
            pageSize: 10,
            total: 0,
            news: []
        }
    }

    componentDidMount() {
        this.getNewsData(this.state.page, this.state.pageSize);
    }

    NewsItem = (props: INewsItem) => {
        const DOMAIN_NAME = this.props.globalStore.DOMainName;
        return <div className="news-item">
            <div className="notice-select"
                 onClick={() => {
                     window.open(`${window.location.origin}/${DOMAIN_NAME}/news?id=${props.id}`)
                 }}>
                <img style={{
                    width: "0.1rem",
                    height: "0.15rem",
                    marginTop: "0.06rem",
                    marginRight: "0.2rem"
                }}
                     src={"./ui/Notice/notice-arrow.png"} alt={""}/>
                <span className="hide-text-1-column"
                      style={{
                          width: "80%",
                          height: "0.3rem"
                      }}>{props.title}</span>
                <span style={{width: "15%", textAlign: "right"}}>[{moment(props.time).format("YYYY-MM-DD")}]</span>
            </div>
        </div>
    }

    onPageChange(page, pageSize) {
        this.getNewsData(page, pageSize);
    }

    getNewsData(page: number, pageSize: number) {
        AxioInstance.get(`${GET_NEWS_LIST}/${page}/${pageSize}`)
            .then((resp: any) => {
                console.log(resp)
                this.setState({
                    total: resp.total,
                    news: resp.records,
                    page: resp.current
                });
            }).catch((e) => console.error(e));
    }

    render() {
        const {page, pageSize, total, news} = this.state;
        return (
            <div style={{width: "100%", height: "9rem"}}>
                <div className="news-container">
                    <div className="news-left-panel">
                        <div className="news-notice-center">
                            通知中心
                        </div>
                    </div>
                    <div className="news-right-panel">
                        <div className="news-right-container">
                            {news.map((element, index) => {
                                return <this.NewsItem key={index} title={element.title} time={element.updateTime}
                                                      id={element.id}/>
                            })}
                        </div>
                        <div className="news-pagination">
                            <Pagination current={page} pageSize={pageSize} total={total}
                                        onChange={this.onPageChange.bind(this)}/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default NewsCenter;